<!doctype html>
<html>

<head>

  <meta charset="utf-8">
  <script src="../../umd/d3plus-core.full.js"></script>

  <style>

    body {
      margin: 0;
      overflow: hidden;
    }

  </style>

</head>

<body></body>

<script>

  var myData = [
    {group: "alpha", axis: "Central",    number: 170.992},
    {group: "alpha", axis: "Kirkdale",   number: 40},
    {group: "alpha", axis: "Kensington", number: 240},
    {group: "alpha", axis: "Everton",    number: 90},
    {group: "alpha", axis: "Picton",     number: 160},
    {group: "alpha", axis: "Riverside",  number: 30},
    {group: "beta",  axis: "Central",    number: 320},
    {group: "beta",  axis: "Kirkdale",   number: 97.5},
    {group: "beta",  axis: "Kensington", number: 40},
    {group: "beta",  axis: "Everton",    number: 110},
    {group: "beta",  axis: "Picton",     number: 40},
    {group: "beta",  axis: "Riverside",  number: 110}
  ];

  new d3plus.Radar()
    .config({
      fontFamily: "Comic Sans MS",
      data: myData,
      groupBy: 'group',
      metric: 'axis',
      value: 'number'
  })
    .render();

</script>

</html>
